<template>
  <!-- ref="pageRef" -->
  <v-page
    v-model="refreshing"
    background="#f5f6fa"
    footer-background="white"
    empty-oss-src="empty-product.png"
    empty-text="暂无商品"
  >
    <!-- :empty="state === 'finished' && !productList.length" -->
    <!-- @refresh="refreshHandle"
    @scroll="scrollHandle"
    @tolower="getProductList" -->
    <template #header>
      <!-- <view class="page-background" :style="{ top: backgroundtop }" /> -->
      <v-navbar
        title="天机综合商城"
        background-color="transparent"
        color="black"
        icon-color="white"
        :border="true"
        :hidden-icon="true"
      />
      <search-input />
      <!-- <user-order-bar /> -->
    </template>
    <template #default>
      <v-swiper-card :list="swiperList" style="margin-bottom: 32rpx" />
      <!-- <v-button @click="test">
        test
      </v-button> -->
      <product-block-list :product-list="productList" />
      <!-- <v-loadmore :state="state" @reload="getProductList" /> -->
    </template>
  </v-page>
</template>

<script setup lang="ts">
import SearchInput from './modules/search-input.vue';
// import UserOrderBar from './modules/user-order-bar.vue';
// import EventProductBlock from './modules/event-product-block.vue';
// import useNavbarLayout from '@/composables/use-navbar-layout';
import image from '@/static/images/image.png';
import productBlockList from './modules/product-block-list.vue';
// import type VPage from '@/components/v-page/v-page.vue';
const swiperList = ref([
  {
    image: 'https://img.yzcdn.cn/vant/cat.jpeg',
    tipTop: '绝版回归',
    label: '猫猫 car',
    tipBottom: '猫猫店铺上新',
  },
  {
    image,
    tipTop: '新品上市',
    label: 'Shrilmps  T恤 夏季款',
    tipBottom: '天机商城',
  },
]);

const productList = ref([
  {
    image,
    productName: 'Shrilmps  T恤 夏季款',
    productPrice: '199',
  },
  {
    image: 'https://img.yzcdn.cn/vant/cat.jpeg',
    productName: '猫猫Tshili',
    productPrice: '199',
  },
  {
    image: 'https://img.yzcdn.cn/vant/cat.jpeg',
    productName: '猫猫Cmel',
    productPrice: '199',
  },
  {
    image:
      'https://fastly.picsum.photos/id/536/1980/1980.jpg?hmac=1WbPOtDwEeqZ3xZvNA_d1-QWZZxB5nj3k1drs6EscHo',
    productName: '大浪淘沙',
    productPrice: '199',
  },
]);

// // const test = () => {
// //   const id = '1904018518451146754';
// //   uni.navigateTo({
// //     url: `/pages/landing-page/landing-reflux?id=${id}`
// //   });
// // };
// const productList = ref<SpuVO[]>([]);
// const eventProductList = computed(() => {
//   if (productList.value.length > 4) {
//     return [productList.value.slice(0, 2), productList.value.slice(2, 4)];
//   } else {
//     return [];
//   }
// });
// const restProductList = computed(() => {
//   if (productList.value.length > 4) {
//     return productList.value.slice(4);
//   } else {
//     return productList.value;
//   }
// });
// const pageIndex = ref(1);
// const state = ref<'loading' | 'finished' | 'error'>();
// const getProductList = async () => {
//   if (state.value !== undefined && state.value !== 'error') return;
//   state.value = 'loading';
//   const response = await $api.postIndexSpuList({
//     page_no: pageIndex.value,
//     page_size: 20
//   });
//   switch (response.__error) {
//     case undefined:
//       productList.value.push(...(response.data?.list ?? []));
//       pageIndex.value++;
//       if (productList.value.length >= response.data?.total) {
//         state.value = 'finished';
//       } else {
//         state.value = undefined;
//       }
//       break;
//     default:
//       state.value = 'error';
//   }
// };
// onLoad(() => {
//   pageIndex.value = 1;
//   productList.value = [];
//   state.value = undefined;
//   getProductList();
// });

const refreshing = ref(false);
// const refreshHandle = async () => {
//   pageIndex.value = 1;
//   productList.value = [];
//   state.value = undefined;
//   refreshing.value = true;
//   await getProductList();
//   refreshing.value = false;
// };

// const pageRef = ref() as Ref<InstanceType<typeof VPage>>;
// const pageHeight = ref(0);
// onMounted(async () => {
//   pageHeight.value = await pageRef.value.getPageHeight(pageRef.value);
// });
// /** 虚拟列表逻辑 */
// const rpxRatio = computed(() => {
//   const system = uni.getSystemInfoSync();
//   return 750 / system.windowWidth;
// });
// const { navBarHeight, statusBarHeight } = useNavbarLayout();
// const backgroundtop = computed(() => {
//   const val = navBarHeight.value + statusBarHeight.value;
//   const half = 1364 / rpxRatio.value;
//   const rpx = 80 + 12 + 90;
//   const px = rpx / rpxRatio.value;
//   return `${val - half + px}px`;
// });

// const scrollTop = ref(0);
// const scrollHandle = (event: ScrollEvent) => {
//   // 10rpx margin-top
//   // 134rpx order-bar
//   // 20rpx margin-bottom
//   // 277rpx event-product-block
//   // 16rpx gap
//   scrollTop.value =
//     event.detail.scrollTop - (10 + 277 + 20 + 277 + 16) / rpxRatio.value;
// };
// /** 每行商品高度 */
// const productBlockHeight = computed(() => {
//   return rpxRatio.value ? 464 / rpxRatio.value : 0;
// });
// /** 最大可见行数 */
// const maxDisplayLine = computed(() => {
//   return pageHeight.value
//     ? Math.ceil(pageHeight.value / productBlockHeight.value) + 2
//     : 0;
// });
// /** 起始序号 */
// const displayMinIndex = computed(() => {
//   if (!productBlockHeight.value) return 0;
//   const current = scrollTop.value;
//   return Math.max(0, Math.floor(current / productBlockHeight.value) * 2);
// });
// /** 终止序号 */
// const displayMaxIndex = computed(() => {
//   if (!productBlockHeight.value) return 0;
//   return displayMinIndex.value + maxDisplayLine.value * 2;
// });
</script>

<style lang="scss" scoped>
.page-background {
  position: fixed;
  z-index: -1;
  left: 50%;
  height: 1364rpx;
  width: 1764rpx;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ff5558 80%, #ffcd96 100%);
}
// .product-list {
//   display: flex;
//   flex-wrap: wrap;
//   gap: 16rpx 0;
//   justify-content: space-between;
// }
</style>
